<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="todo-list-example">
			<input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
			<ul>
				<li is="todo-item" v-for="(todo, index) in todos" v-bind:title="todo" v-on:remove="todos.splice(index, 1)"></li>
			</ul>
		</div>

		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>

		<script type="text/javascript">
			Vue.component('todo-item', {
			  template: '\<li>\{{ title }}\<button v-on:click="$emit(\'remove\')">X</button>\</li>\ ' ,
			  props: ['title']
			})
			new Vue({
				el: '#todo-list-example',
				data: {
					newTodoText: '',
					todos: [
						'Do the dishes',
						'Take out the trash',
						'Mow the lawn'
					]
				},
				methods: {
					addNewTodo: function() {
						this.todos.push(this.newTodoText)
						this.newTodoText = ''
					}
				}
			})
		</script>
	</body>

</html>